<template>
    <van-card
        v-for="user in userList"
        :title="user.username"
        :desc="user.profile"
        style="border-radius: 15px;background-color: #e8e8e8;"
    >
      <template #thumb>
        <van-image :src="user?.avatarUrl" round width="88" height="88" @click="showUserDetail(user?.id)"/>
      </template>

      <template #tags>
        <van-tag v-for="tag in user?.tags" plain type="danger" style="margin-right: 8px;margin-top: 8px"
                 @click="showUserDetail(user?.id)">
          {{ tag }}
        </van-tag>
      </template>

      <template #price>
        <van-icon name="phone-o" style="">{{ ':' + user.phone }}</van-icon>
      </template>

      <template #num>
        <van-button size="small" round plain type="primary"
                    style="width: 48px;height: 28px;margin-top: 10px" @click="toChat(user)">
          私 聊
        </van-button>
      </template>
    </van-card>

</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios";
import {getCurrentUser} from "../services/user";
import {Dialog, Toast} from "vant";

let router = useRouter();

interface UserCardListProps {
  userList: UserType[]
}
const props = defineProps<UserCardListProps>()
// const props = withDefaults(defineProps<UserCardListProps>(), {
//   loading: true,
//   // @ts-ignore
//   userList: [] as UserType[],
// });

/**
 * 展示用户详情
 * @param id
 */
const showUserDetail = (id: any) => {
  router.push({
    path: "/user/detail",
    query: {
      id: id
    }
  })
}

/**
 * 联系我
 * @param user
 */
const toChat = async (user: any) => {
  let currentUser = await getCurrentUser();
  if (!currentUser) {
    // showConfirmDialog({
    //   message:
    //       "该功能需要登陆后使用,是否登录",
    //   confirmButtonText: "去登录"
    // })
    Dialog.confirm({
      message: '请先登录',
      confirmButtonText: '登录',
    })
        .then(() => {
          Toast.fail("未登录")
          router.replace("/user/login")
        })
        .catch(() => {
        });
  } else {
    await router.push({
      path: "/chat",
      query: {
        id: user.id,
        username: user.username,
        userType: 1
      }
    })
  }
}


</script>

<style scoped>

</style>
